<div id="show_user_box">
	<div class="btn-group">
		<button class="btn btn-primary"  onclick="showAddModal();">
			Add
		</button>
		<button class="btn" onclick="showEditModal();">
			Edit
		</button>
		<button class="btn btn btn-danger"onclick="deleteUser();">
			Delete
		</button>
	</div>
	<br>
	<form>
		<table id="users_table" class="table table-striped">
			<thead>
				<tr>
					<th> </th>
					<th>#</th>
					<th>Name</th>
					<th>Lastname</th>
					<th>Username</th>
					<th>Address</th>
					<th>Card number</th>
					<th>Phnone number</th>
					<th>Privilage</th>
				</tr>
			</thead>
			<tbody id="users_table_body" >

			</tbody>
		</table>
	</form>

	<div id="add_user_modal" class="modal hide fade">
		<div class="modal-header">

			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
				&times;
			</button>
			<h3 id="user_modal_title">Add User
			<button class="btn btn btn-warning" onclick="resetForm();">
				Reset
			</button></h3>
		</div>
		<div class="modal-body">
			{{ form.as_p }}

		</div>
		<div class="modal-footer">
			<div id="alert_area"></div>
			<br>
			<a onclick="$('#add_user_modal').modal('hide');" class="btn">Anuluj</a>
			<button class="btn btn-primary" id="submit_add" onclick="">
				Zatwierdź
			</button>

		</div>

	</div>
		<div id="delete_modal" class="modal hide fade">
		<div class="modal-header">

			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
				&times;
			</button>
			<h3 >Usuwanie</h3>
		</div>
		<div class="modal-body">
			Czy chcesz usunąć wybranego użytkownika?

		</div>
		<div class="modal-footer">
			<div id="alert_area"></div>
			<br>
			<a onclick="$('#add_user_modal').modal('hide');" class="btn">Nie</a>
			<button class="btn btn-danger" id="submit_add" onclick=" delUser();$('#delete_modal').modal('hide');">
				Tak
			</button>

		</div>

	</div>

	<script>
		reloadUser();
		
	

function showEditModal(){
	resetForm();
	
	
	if(typeof getSelectedId() === 'undefined')
	{
		alert("You must select row.");
		return;
	}
	$('#submit_add').click(setUser);
		$.ajax({
				url : "/api/users/get/by/id",
				type : 'POST',
				data : {
					csrfmiddlewaretoken : '{{ csrf_token }}', // just the token value
					id:getSelectedId()
				},
				success : function(response) {
					var users = eval(response);
					for ( i = 0; i < users.length; i++) {

						$('#user_modal_title').html('Edit user: '+users[i].id +' <button class="btn btn btn-warning" onclick="resetForm();">Reset</button>');
						
						  $('#id_name').val( users[i].name); 
						
						  $('#id_lastname').val(users[i].lastname);
						  $('#id_username').val(users[i].username );
						  $('#id_address').val(users[i].address);
						  $('#id_cardNumber').val(users[i].cardNumber); 
						  $('#id_phoneNumber').val(users[i].phoneNumber );
						  $('#id_privilage').val(users[i].privilage);
					}
				}
			});
	
	
	
	$('#add_user_modal').modal('show');
}
function getSelectedId(){
	return $('input[name=tab1]:checked').val()
}
function showAddModal(){
	resetForm();
	$('#submit_add').click(addUser);
	$('#user_modal_title').html('Add user <button class="btn btn btn-warning" onclick="resetForm();">Reset</button>');
	$('#add_user_modal').modal('show');
}
		function reloadUser() {
			$.ajax({
				url : "/api/users/get/all/",
				type : 'POST',
				data : {
					csrfmiddlewaretoken : '{{ csrf_token }}' // just the token value
				},
				success : function(response) {
					$('#users_table_body').html('');
					var users = eval(response);
					for ( i = 0; i < users.length; i++) {

						$('#users_table_body').append('<tr>' + '<td><input class="tabradio" type="radio" name="tab1" value="' + users[i].id + '" /></td><td>' +
						 users[i].id + '</td>'
						  + '<td>' + users[i].name + '</td>' 
						  + '<td>' + users[i].lastname + '</td>'
						  + '<td>' + users[i].username + '</td>'
						  + '<td>' + users[i].address + '</td>' 
						  + '<td>' + users[i].cardNumber + '</td>' 
						  + '<td>' + users[i].phoneNumber + '</td>' 
						  + '<td>' + users[i].privilage + '</td>'
						  + '</tr>');

					}
				}
			});
		}

		function resetForm() {
			$(":input").not(":button, :submit, :reset, :hidden,.tabradio").each(function() {
				this.value = '';
			});
		}

		function addUser() {
			
			if ($('#id_password').val() != $('#id_rePassword').val()) {
				showAlert('error','<strong>Error! </strong>Passwords are not identical.');
				return;
			}
			
			$.ajax({
				url : "/api/users/add/",
				type : 'POST',
				data : {
					{% for field in form %}
					{{field.name}} : $('#id_{{ field.name }}').val(),

					{% endfor %}
					csrfmiddlewaretoken : '{{ csrf_token }}'
				},
				success : function(response) {
					var val = eval(response)[0].Error;
					if (val==0){
						showAlert('success','User added!');
						reloadUser();
					}
					else if (val==-4)
						showAlert('error','Form is not valid!');
					else if (val==-3)
						showAlert('error','Form is not valid! Some fields is not uniqe.');
				}
			})

		}
		
			function setUser() {
			
			if ($('#id_password').val() != $('#id_rePassword').val()) {
				showAlert('error','<strong>Error! </strong>Passwords are not identical.');
				return;
			}
			
			$.ajax({
				url : "/api/users/set/",
				type : 'POST',
				data : {
					id: getSelectedId(),
					{% for field in form %}
					{{field.name}} : $('#id_{{ field.name }}').val(),

					{% endfor %}
					csrfmiddlewaretoken : '{{ csrf_token }}'
				},
				success : function(response) {
					var val = eval(response)[0].Error;
					if (val==0){
						showAlert('success','User Edited!');
						reloadUser();
					}
					else if (val==-4)
						showAlert('error','Form is not valid!');
					else if (val==-3)
						showAlert('error','Form is not valid! Some fields is not uniqe.');
				}
			})

		}
		function delUser() {
			
			
			$.ajax({
				url : "/api/users/del/",
				type : 'POST',
				data : {
					id: getSelectedId(),
					csrfmiddlewaretoken : '{{ csrf_token }}'
				},
				success : function(response) {
					var val = eval(response)[0].Error;
					if (val==0){
						reloadUser();
					}
				}
			});

		}
		function showAlert(type,message)
		{
			$('#alert_area').html('');
			$('#alert_area').append('<div class="alert alert-'+type+'">'+message+' </div>');
		}
		function deleteUser(){
				if(typeof getSelectedId() === 'undefined')
	{
		alert("You must select row.");
		return;
	}
	$('#delete_modal').modal('show');
		}
	</script>

</div>